<template>
	<view class="section section-detail">
		<view class="product_info_comment">
			<view class="comments-gallery">
				<view class="comments-title">
					<view class="comments-title-left">
						用户评价
					</view>
					<view class="comments-title-right" @click="toCommentDetail">
						{{commentData.detail.satisfy_per}}
						<view class="icon-right-common">
							<image src="../../static/images/right.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="comments-tags">
					<block v-for="(tag,tagIndex) in commentData.detail.comment_tags" :key="tagIndex">
						<view class="comments-tags-text" @click="toCommentDetail">
							{{tag.tag_name}}
						</view>
					</block>

				</view>
				<view class="scroll-list">
					<u-scroll-list>
						<view v-for="(item, index) in commentData.list" :key="index" class="scroll-item" @click="toUserComment(item)">
							<view class="swiper-box card-box">
								<view class="comment-header">
									<view class="avatar-img-box">
										<LazyLoad :src="item.user_avatar" width='100%'  height='100%'></LazyLoad>
									</view>
									<view class="user-info ">
										<view class="name text-ellipsis">
											{{item.user_name}}
										</view>
										<view class="comment-date ">
											{{item.add_time}}
										</view>
									</view>
								</view>
								<view class="comment-content">
									<rich-text :nodes="item.comment_content" class="text"></rich-text>
									<view class="photos">
										<block v-for="(photo,photoIndex) in item.comment_images.slice(0,3)"
											:key="photoIndex">
											<view class="img" @click.stop="previewImage(index,item.comment_images)">
												<LazyLoad :src="photo" width='100%'  height='100%'></LazyLoad>
											</view>
										</block>

									</view>
								</view>
							</view>
						</view>
						<view class="view-all el-flex" @click="toCommentDetail">
							<view class="view-all-text">
								<view class="text">
									查看全部
									<image src="../../static/images/icon-view-all.png" mode=""></image>
								</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
		</view>
		<view class="blank_line">

		</view>
	</view>
</template>

<script>
	import LazyLoad from '../LazyLoad/LazyLoad.vue'
	export default {
		name: "comments",
		props: ['commentData', 'commodity_id'],
		data() {
			return {

			};
		},
		components:{LazyLoad},
		methods: {
			toUserComment(item){
				uni.navigateTo({
					url: `/subPage/userComment/userComment?comment_id=${item.comment_id}`
				})
			},
			toCommentDetail() {
				uni.navigateTo({
					url: `/subPage/commentDetail/commentDetail?commodity_id=${this.commodity_id}`
				})
			},
			previewImage(index, photoList) {
				uni.previewImage({
					current: index,
					urls: photoList,
					loop: true,
					indicator: 'number'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	@keyframes opacity01 {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.section-detail {
		view {
			line-height: 1.15;
		}

		.blank_line {
			height: 0.2rem;
			background: rgb(246, 246, 246);
			margin-top: -1px;
			width: 100%;
			transform: translateZ(0);
		}

		.product_info_comment {
			.comments-gallery {
				padding: 0.1rem 0.32rem 0.36rem;
				width: 7.2rem;
				text-align: left;
				z-index: auto;
				border-bottom: 1px solid rgba(0, 0, 0, .05);

				.comments-title {
					display: flex;
					padding-right: .32rem;
					height: 0.72rem;
					line-height: .72rem;
					align-items: center;
					justify-content: space-between;
					position: relative;

					.comments-title-left {
						color: #000;
						font-size: .28rem;
						font-weight: 700;
					}

					.comments-title-right {
						padding-right: 0.45rem;
						color: #7f7f7f;
						font-size: .24rem;
						position: relative;

						.icon-right-common {
							position: absolute;
							right: 0.1rem;
							top: 50%;
							width: 0.36rem;
							height: 0.36rem;
							transform: translate3d(0, -50%, 0);

							image {
								width: 0.36rem;
								height: 0.36rem;
							}
						}
					}
				}

				.comments-tags {
					margin-top: 0.12rem;
					margin-bottom: 0.16rem;
					min-height: 0.44rem;
					overflow: hidden;

					.comments-tags-text {
						background-color: #ffeeea;
						font-size: .2rem;
						line-height: 1;
						padding: 0.09rem 0.16rem;
						margin-right: 0.2rem;
						margin-bottom: 0.2rem;
						display: inline-block;
						color: #494a4b;
						border-radius: 0.5rem;
					}
				}

				.scroll-list {
					.view-all {

						font-size: .2rem;
						color: #7f7f7f;
						margin-left: 0.16rem;
						padding: 0 0.03rem 0 0.1rem;
						line-height: .3rem;

						.view-all-text {
							width: .86rem;
							height: 0.24rem;
							margin-bottom: 1.15rem;

							.text {
								width: 0.24rem;
								height: 0.24rem;
								font-size: .2rem;
								color: #7f7f7f;
								line-height: .3rem;
							}

							image {
								width: 0.24rem;
								height: 0.24rem;
								margin-left: -0.02rem;
								margin-top: 0.12rem;
							}
						}
					}

					.scroll-item {
						width: 5.5rem;
						margin-left: 0.16rem;

						&:first-child {
							margin-left: 0;
						}

						.swiper-box {
							width: 5.45rem;
							// height: 3.81rem;
							height: auto;
							box-sizing: border-box;
							padding: 0.32rem;
							border: 0.016rem solid #e5e5e5;
							border-radius: 0.16rem;
						}

						.card-box {
							.comment-header {
								display: flex;
								flex: 1 1 auto;
								align-items: center;
								flex-wrap: nowrap;

								.avatar-img-box {
									margin-right: 0.24rem;
									width: 0.64rem;
									height: 0.64rem;
									overflow: hidden;
									border-radius: 100%;

									image {
										width: 100%;
										height: 100%;
									}
								}

								.user-info {
									flex: 1 1 auto;

									.name {
										font-size: .24rem;
										color: #000;
										width: 3.2rem;
										font-weight: 400;
									}

									.comment-date {
										margin-top: 0.06rem;
										color: rgba(0, 0, 0, .3);
										font-size: .2rem;
									}
								}
							}

							.comment-content {
								text-align: justify;

								.text {

									display: block;
									margin: 0.16rem 0;
									line-height: 1.5em;
									height: 3em;
									overflow: hidden;
									position: relative;
									color: rgba(0, 0, 0, .5);
									font-size: .24rem;

									/deep/ div {
										-webkit-line-clamp: 2;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										text-overflow: ellipsis;
									}
								}

								.photos {
									margin-bottom: 0.12rem;

									.img {
										display: inline-block;
										width: 1.52rem;
										height: 1.52rem;
										margin: 0 0.1rem 0 0;
										border-radius: 0.16rem;
										overflow: hidden;
										position: relative;

										&:last-child {
											margin-right: 0;
										}

										image {
											animation: opacity01 .3s;
											width: 100%;
											height: 100%;
											object-fit: cover;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>